<!DOCTYPE html>
<html>
<head>
    {include file="common/head"}
    <style>
        .mySwiper {
            width: 100%;
            height: 120px;
            margin-bottom: 20px;
        }
        .mySwiper2 {
            width: 100%;
            height: 570px;
            margin-bottom: 20px;
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .mySwiper .swiper-slide {
            opacity: 0.4;
        }
        .mySwiper .swiper-slide.swiper-slide-thumb-active {
            opacity: 1;
        }
        @media (max-width: 1000px) {
            .mySwiper {
                width: 100%;
                height: 80px;
            }
            .mySwiper2 {
                width: 100%;
                height: 350px;
            }
        }
    </style>
</head>
<body>
<div class="body-inner">
    {include file="common/menu"}
    <!--获取内页横幅的第二张-->
    {hkcms:adv name="sub" itemid="2"}
    <div id="banner-area" class="banner-area" style="background-image:url({$item.image})">
        <div class="banner-text">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="banner-heading">
                            {// $Cate 存在于栏目首页、栏目列表页、详情页，里面是栏目的信息}
                            <h1 class="banner-title">{$Cate.title}</h1>
                            {// 面包屑导航，symbol 是分隔符，class是html class,赋值给a标签，更多参数前往手册查看}
                            <nav aria-label="breadcrumb" class="mt-4">{hkcms:breadcrumb class="active_a" symbol=" / " /}</nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {/hkcms:adv}

    <section class="product-details">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="product__details__text">
                        <h3>{$Info.title}</h3>
                        <div class="product__details__rating">
                            <a href="{$Info.category.url}" class="mr-4"><i class="fa fa-list"></i> {$Info.category.title}</a>
                            <span class="mr-4"><i class="fa fa-calendar-alt"></i> {hkcms:date format="Y-m-d" name="$Info.publish_time"}</span>
                            <span><i class="fa fa-eye"></i> {$Info.views} {:__('View')}</span>
                        </div>
                        <hr style="margin: 0 0 40px 0">
                    </div>
                </div>
                <div class="col-lg-12 col-md-12">
                    <div class="product__details__pic">
                        <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper-container mySwiper2">
                            <div class="swiper-wrapper">
                                {// images是图集（多图）可以使用volist 循环输出、也可以使用fileinfo获取图片详细信息}
                                {hkcms:volist name="Info.images"}
                                <div class="swiper-slide"><img src="{$item}" /></div>
                                {/hkcms:volist}
                            </div>
                            <div class="swiper-button-next"><i class="fas fa-angle-right"></i></div>
                            <div class="swiper-button-prev"><i class="fas fa-angle-left"></i></div>
                        </div>
                        <div thumbsSlider="" class="swiper-container mySwiper">
                            <div class="swiper-wrapper">
                                {hkcms:volist name="Info.images"}
                                <div class="swiper-slide"><img src="{$item}" /></div>
                                {/hkcms:volist}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="product__details__tab">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab" aria-selected="true">{:__('Description')}</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabs-1" role="tabpanel">
                                <div class="product__details__tab__desc main-content">{$Info.content}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {include file="common/footer"}

    <script>

        var swiper11 = new Swiper(".mySwiper", {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            thumbs: {
                swiper: swiper11,
            },
        });
    </script>
</div>
</body>
</html>
